<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>登录</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript" src="js/js_z.js"></script>
        <link rel="stylesheet" type="text/css" href="plugins/FlexSlider/flexslider.css">
        <script type="text/javascript" src="plugins/FlexSlider/jquery.flexslider.js"></script>
        <link rel="stylesheet" type="text/css" href="css/thems.css">
        <link rel="stylesheet" type="text/css" href="css/responsive.css">
        <script type="text/javascript">
            function checkName(){
                var username=$("#mess").val();
                $("#f1").html("");
                $.getJSON("/doSel",
                    {"username":username},
                    function (data){
                        if(data!=null){
                            $("#f1").html("<font color='red'>用户名已经存在</font>");
                            return false
                        }else {
                            if(username==""||name.trim().length<4||username.trim().length>16){
                                $("#f1").html("<font color='red'>用户名不能为空或用户名位数不在4~16位之间</font>");
                                return false;
                            }
                            return  true;
                        }
                    });
                return true;
            }
            function checkPwd1(){
                var pwd1=$("#pwd1").val();
                $("#f2").html("");
                if(pwd1==""||pwd1.trim().length<4||pwd1.trim().length>16){
                    $("#f2").html("<font color='red'>密码不能为空或密码位数不在4~16位之间</font>");
                    return false;
                }
                return true;
            }
            function checkPwd2(){
                var pwd1=$("#pwd1").val();
                var pwd2=$("#pwd2").val();
                $("#f3").html("");
                if(pwd1!=pwd2){
                    $("#f3").html("<font color='red'>密码与原密码不一致</font>");
                    return false;
                }
                return true;
            }
            $(function(){
                $("[name='username']").blur(checkName);
                $("[name='password']").blur(checkPwd1);
                $("[name='password1']").blur(checkPwd2);
                $("[name='register']").submit(function(){
                    if(!checkName()) return false;
                    if(!checkPwd1()) return false;
                    if(!checkPwd2()) return false;
                    return true;
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <form id="register" class="reg" action="./doReg" method="post" >
                <p class="h4" style="color:#999;font-size:20px ;">请填写注册信息，点击”注册“即可完成注册</p>
                <br />
                <span style="color: #000000;font-size: 15px;">&nbsp;用&nbsp;户&nbsp;名：</span>
                <input type="text" name="username" id="mess" />
                <div id="f1"></div><br /><br />
                <span style="color: #000000;font-size: 15px;">&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
                <input type="password" name="password" id="pwd1" />
                <div id="f2"></div><br /><br />
                <span style="color: #000000;font-size: 15px;">确认密码：</span>
                <input type="password" name="password1" id="pwd2" />
                <div id="f3"></div><br /><br />
                <button type="submit">注册</button>
                <button type="reset">重置</button>
                <a href="login.html">已有账号马上登录</a>
            </form>
        </div>
    </body>
</html>
